<template>
	<view class="container">
		<u-navbar title=" " :background="{ background: $setting.colorTheme() }" :is-back="false">
			<view class="navbar-title">个人中心</view>
		</u-navbar>
		
		<view class="con" :style="{background: 'url('+$setting.imageUrl()+'mine-bg.png) no-repeat', backgroundSize: '100% 276rpx'}">
			<view class="user flex-align-center" @click="jump('/pages/mine/user_info/user_info')">
				<image class="user-avatar" :src="userInfo.userInfo.avatarUrl || $setting.avatarUrl()"></image>
				<view class="user-con">
					<view class="user-name flex-space-between">
						<view>{{userInfo.userInfo.nickName}}</view>
						<view>
							<image class="setting" :src="$setting.imageUrl()+'setting.png'"></image>
							<!-- <u-icon name="setting" color="#ffffff" size="36"></u-icon> -->
						</view>
					</view>
					<view class="user-id">{{userInfo.userInfo.user_id}}</view>
				</view>
			</view>
			
			<view class="order">
				<view class="flex-space-between">
					<view class="order-title">我的订单</view>
					<view class="order-title-icon flex-align-center" @click="jump('/pages/mine/order/list?dataType=all')">
						<view>全部订单</view>
						<u-icon name="arrow-right" size="32" color="#666666"></u-icon>
					</view>
				</view>
				
				<view class="list flex-space-between">
					<view class="item flex-column-center" v-for="(item,index) in orderList" :key="index" @click="handleOrder(item)">
						<image class="item-image" :src="item.image"></image>
						<view class="item-name">{{item.name}}</view>
						
						<u-badge size="mini" type="error" :offset="[-10,-10]" :count="item.count"></u-badge>
					</view>
				</view>
			</view>
			<view class="wrap oneBlank">
				<view class="order-title" style="margin-left: 26rpx;margin-bottom: 24rpx;">常用功能</view>
				<u-row gutter="16">
					<u-col span="3">
						<view class="demo-layout" @click="handleAgent()">
							<image class="cell-item-image" :src="$setting.imageUrl()+'mine-tgy.png'"></image>
							<view class="cell-item-name">分享奖励</view>
							<view class="jiangli" v-if="fgcoupon==1"><text style="color: #BB0024;">{{conptotal}}元</text>   奖励</view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout" @click="jump('/pages/mine/address/address')">
							<image class="cell-item-image" :src="$setting.imageUrl()+'mine-dz.png'"></image>
							<view class="cell-item-name">收货地址</view>
							<view class="jiangli"></view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout" @click="jump('/pages/mine/invoice/index')">
							<image class="cell-item-image" :src="$setting.imageUrl()+'mine-fp.png'"></image>
							<view class="cell-item-name">开具发票</view>
							<view class="jiangli"></view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout" @click="jump('/pages/mine/coupon/coupon')">
							<image class="cell-item-image" :src="$setting.imageUrl()+'mine-coupon.png'"></image>
							<view class="cell-item-name">我的优惠券</view>
							<view class="jiangli"><text style="color: #BB0024;">{{couponLength}}张</text>未使用</view>
						</view>
					</u-col>
				</u-row>
			</view>
			<view class="adInfo" v-if="advertisementList && advertisementList.length>0">
				<u-swiper :list="advertisementList" name="file_path" height="200" border-radius="24" indicator-pos="bottomRight" @click="handleSwiper"></u-swiper>
			</view>
			<view class="wrap oneBlank">
				<view class="order-title" style="margin-left: 26rpx;margin-bottom: 24rpx;">常用服务</view>
				<u-row gutter="16">
					<u-col span="3">
						<view class="demo-layout" @click="jump('/pages/mine/resource/collect')">
							<image class="cell-item-image" :src="$setting.imageUrl()+'mine-sc.png'"></image>
							<view class="cell-item-name">我的收藏</view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout" @click="gojoinApply()">
							<image class="cell-item-image" :src="$setting.imageUrl()+'mine-gz.png'"></image>
							<view class="cell-item-name">合作加盟</view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout" @click="getCustomer">
							<image class="cell-item-image" :src="$setting.imageUrl()+'mine-kf.png'"></image>
							<view class="cell-item-name">客服服务</view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout" @click="jump('/pages/mine/feedback/feedback')">
							<image class="cell-item-image" :src="$setting.imageUrl()+'mine-yj.png'"></image>
							<view class="cell-item-name">意见反馈</view>
						</view>
					</u-col>
				</u-row>
				<u-row gutter="16" justify="space-between" class="mt20">
					<u-col span="3" @click="jump('/pages_sub/wechat_service_discount/wechat_service_discount')">
						<view class="demo-layout">
						<image class="cell-item-image" :src="$setting.imageUrl()+'fuliguanicon.png'"></image>
						<view class="cell-item-name">企微福利官</view><view class="jiangli">进群领券</view></view>
							
					</u-col>
					<u-col span="3" @click="jump('/pages_sub/become_delivery/become_delivery')">
						<view class="demo-layout">
						<image class="cell-item-image" :src="$setting.imageUrl()+'qishouicon.png'"></image>
						<view class="cell-item-name">成为骑手</view></view>
					</u-col>
					<u-col span="3" @click="applyStatusPage()">
						<view class="demo-layout">
						<image class="cell-item-image" :src="$setting.imageUrl()+'smallshop.png'"></image>
						<view class="cell-item-name">我的摊位</view></view>
					</u-col>
					<u-col span="3">
						<view class="demo-layout" @click="goToPage(1)" v-if="!$u.test.isEmpty(userDelivery)">
							<image class="cell-item-image" :src="$setting.imageUrl()+'mine-ps.png'"></image>
							<view class="cell-item-name">跑腿配送</view>
						</view>
					</u-col>
					<u-col span="3" @click="goToPage(0)" v-if="!$u.test.isEmpty(shopperInfo)">
						<view class="demo-layout">
						<image class="cell-item-image" :src="$setting.imageUrl()+'mine-ps.png'"></image>
						<view class="cell-item-name">社区配送</view></view>
					</u-col>
					
				</u-row>
			</view>
			
		</view>
	</view>
</template>

<script>


export default {
	data() {
		return {
			fgcoupon:0,
			conptotal:0,
			couponLength: 0,
			userInfo: {
				userInfo: {
					avatarUrl: "",
				},
			},
			userDelivery: {},
			shopperInfo:{},
			agentInfo: {},
			orderList: [
				{
					name: "待付款",
					image: this.$setting.imageUrl()+'dfk.png',
					id: "payment",
					count: 0,
				},
				{
					name: "待发货",
					image: this.$setting.imageUrl()+'dfh.png',
					id: "delivery",
					count: 0,
				},
				{
					name: "待收货",
					image: this.$setting.imageUrl()+'dsh.png',
					id: "received",
					count: 0,
				},
				{
					name: "待评价",
					image: this.$setting.imageUrl()+'dpj.png',
					id: "comment",
					count: 0,
				},
				{
					name: "退款/售后",
					image: this.$setting.imageUrl()+'tk.png',
					id: "refund",
					count: 0,
				},
			],
			advertisementList:null,
			share:{
					title: '',
					imageUrl:'',
            	},
			applyStatus:-1
		}
	},
	onLoad() {
		this.getConfigDataDetail()
		this.getApplyStatus()
		this.getLocation()//高德定位
	},
	onShow() {
		this.getAdIndexFun()
		this.getHttp();
	},
	methods: {
	
		goToPage(type){
			uni.setStorageSync('token_type',type)
			if(type==1){
				this.jump('/pages/mine/delivery/delivery')
			}else{
				this.jump('/pages/mine/delivery/delivery_pre')
			}
		},
		getCoupon() {
			uni.$u.api.getCoupon({
					data_type: 'not_use',
					page: 1,
					list_rows: 30,
				}).then(res => {
				this.couponLength = res.list['length']
			})
		},
		getInviteCon() {
			uni.$u.api.getInviteConList({}).then(res => {
				console.log(res,'getInviteConList')
				this.fgcoupon = res.fgcoupon
				this.conptotal = res.conptotal
			})
		},
		applyStatusPage(){
			if(this.applyStatus==20){
				this.jump('/pages/mine/promotion/shop')
			}else{
				this.jump('/pages/mine/promotion/booth')
			}
		},
		getApplyStatus() {
			uni.$u.api.getApplyStatus().then(res => {
				this.applyStatus = res.result.status;
			})
		},
		getConfigDataDetail(){
				let params = {
					page_type:'center'
				}
				uni.$u.api.getConfigDataDetail(params).then(res => {
					let Detail =  res.data
					this.share.title = Detail.content
					this.share.imageUrl = Detail.image
				})
			},
		getAdIndexFun(){
			let params = {type:'center'}
			uni.$u.api.getAdIndex(params).then(res => {
				this.advertisementList = res.list
				// console.log(this.advertisementList)
			})
		},
		handleSwiper(e) {
			this.jump(this.advertisementList[e].link_url);
		},
		handleAgentQrcode() {
			
		},
		handleAgent() {
			// this.jump('/pages/mine/promotion/promotion');
			this.jump('/pages/mine/promotion/inviting_prizes');
			// if(this.agentInfo.is_applying == true) {
			// 	uni.showToast({
			// 		title: "等待审核推广员信息",
			// 		icon: "none"
			// 	})
			// 	return ;
			// } else if(this.agentInfo.is_applying == false && this.agentInfo.is_agent == false) {
			// 	this.jump('/pages/mine/publicize/publicize_form');
			// } else if(this.agentInfo.is_agent == true) {
			// 	this.jump('/pages/mine/publicize/publicize_qrcode');
			// }
		},
		handleOrder(item) {
			if(item.id == 'refund') {
				this.jump('/pages/mine/order/refund_list');
			} else {
				this.jump('/pages/mine/order/list?dataType='+item.id);
			}
		},
		jump(url) {
			uni.navigateTo({
				url: url
			})
		},
		gojoinApply(){
			// #ifdef H5
			window.location.href = 'https://admin.jiumaioda.com/joinApply?type=h5';
			// #endif
			
			
			// #ifdef MP
				this.jump('/pages/web_index/web_index?url=https://admin.jiumaioda.com/joinApply')
			// #endif
		},
		getAgent() {
			uni.$u.api.getAgent().then(res => {
				this.agentInfo = res;
			})
		},
		getUserDelivery() {
			uni.$u.api.getUserDelivery().then(res => {
				this.userDelivery = res;
			})
		},
		getShopperInfo() {
			uni.$u.api.getShopperInfo().then(res => {
				this.shopperInfo = res;
			})
		},
		getUserInfo() {
			uni.$u.api.userInfo().then(res => {
				this.userInfo = res;
				
				this.orderList.forEach((item,index) => {
					for(let key in this.userInfo.orderCount) {
						if(item.id == key) {
							item.count = this.userInfo.orderCount[key];
						}
					} 
				})
				
			})
		},
		getCustomer() {
			// #ifdef MP-WEIXIN
			this.$store.dispatch('getCustomer')
			// #endif
			
			
			// #ifdef H5
			
		
			uni.$u.api.getCustomer().then(res => {
				window.location.href = res.kflink;
				// if(res.kflink){
				// 	// #ifdef MP-WEIXIN
				// 	wx.openCustomerServiceChat({
				// 		extInfo: {url: res.kflink},
				// 		corpId: 'ww74f7587b3f70c84d',
				// 		success(res) {
				// 			console.log(res)
				// 		},
				// 		fail(err){
				// 			console.log(err,'err')
				// 		},
				// 	})
				// 	// #endif
					
				// }
				
			})
				// #endif
		},
		getHttp() {
			this.getUserInfo();
			this.getUserDelivery();
			this.getAgent();
			this.getShopperInfo();
			this.getCoupon();
			this.getInviteCon();
		},
	},
}
</script>

<style lang="scss" scoped>
	.container {
		.order-title {
			font-size: 28rpx;
			color: #111111;
			font-weight: bold;
		}
		.oneBlank{
			border-radius: 16rpx;
			background: #FFFFFF;
			padding: 22rpx 0rpx;
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			.mt10{
				margin-top: 10px;
			}	
			.mt20{
				margin-top: 20px;
			}
			.u-row {
				margin: 40rpx 0;
			}
				
			.demo-layout {
				// height: 100rpx;
				border-radius: 8rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-start;
			}
			.cell-item-image{
				width: 50rpx;
				height: 50rpx;
			}
			.cell-item-name{
				font-size: 24rpx;
				margin-top: 6rpx;
			}
			.jiangli{
				font-size: 18rpx;
				color: #777777;
			}
		}
		.adInfo{
			width: 100%;
			border-radius: 16rpx;
			margin: 20rpx 0;
		}
		.con {
			padding: 30rpx;
			
			.user {
				padding: 0 26rpx;
				
				.user-avatar {
					width: 112rpx;
					height: 112rpx;
					border-radius: 160rpx;
				}
				
				.user-con {
					margin-left: 22rpx;
					flex: 1;
					
					.user-name {
						font-size: 32rpx;
						color: #FFFFFF;
						font-weight: bold;
					}
					
					.user-id {
						font-size: 24rpx;
						color: rgba(255, 255, 255, 0.8);
					}
					
					.setting{
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
			
			.order {
				border-radius: 16rpx;
				background: #FFFFFF;
				padding: 22rpx 26rpx;
				margin-top: 20rpx;
					
				
				
				.order-title-icon {
					font-size: 24rpx;
					color: #666666;
				}
				
				.list {
					margin-top: 28rpx;
					
					.item {
						position: relative;
						
						.item-image {
							width: 48rpx;
							height: 48rpx;
						}
						
						.item-name {
							font-size: 24rpx;
							color: #111111;
						}
					}
				}
			}
			
			.cell {
				
				.cell-item {
					padding: 26rpx;
					border-radius: 16rpx;
					margin-top: 20rpx;
					
					.cell-item-image {
						width: 48rpx;
						height: 48rpx;
					}
					
					.cell-item-name {
						font-size: 28rpx;
						color: #111111;
						margin-left: 20rpx;
					}
				}
			}
		}
	}
</style>
